<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			table,
			body,
			tr,
			td,
			th {
				padding: 0;
				margin: 0;
			}
			#app {
				display: flex;
				justify-content: center;
			}
			.book {
				margin-top: 100px;
			}
			table {
				border-collapse: collapse;
			}
			table thead tr {
				background-color: #f5f5f5;
			}
			td,
			th {
				padding: 12px;
				border: 1px solid #ccc;
			}

			.total {
				margin-top: 20px;
				font-size: 20px;
				font-weight: 900;
			}

			.active {
				background-color: red;
				color: #fff;
			}
			input {
				width: 40px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="book" v-if="books.length">
				<table>
					<thead>
						<tr>
							<th>序号</th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr
							v-for="(item, index) in books"
							:key="item.id"
							:class="{active: index === selecetIndex}"
							@click="trClick(item, index)"
						>
							<td>{{index+1}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date}}</td>
							<td>{{formatPrice(item.price)}}</td>
							<td>
								<button @click="addBookCount(item)">+</button>
								<input type="text" v-model="item.count" v-if="item.isInp" v-focus />
								<span v-else>{{item.count}}</span>
								<button @click="subBookCount(item)" :disabled="item.count <=1">-</button>
							</td>
							<td>
								<button @click="removeBook(item)">移除</button>
							</td>
						</tr>
					</tbody>
				</table>

				<div class="total">总价: {{formatPrice(totalPrice)}}</div>
			</div>

			<h1 v-else>购物车为空, 请添加喜欢的书籍</h1>
		</div>

		<script src="./js/vue.js"></script>
		<script src="./data/books.js"></script>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						books: books,
						selecetIndex: -1,
						isShowInp: false,
					}
				},
				directives: {
					focus: {
						mounted: (el) => {
							el.focus()
						},
					},
				},
				created() {
					this.books = this.books.map((item) => {
						return {
							...item,
							isInp: false,
						}
					})
				},
				methods: {
					trClick(item, index) {
						this.selecetIndex = index
						this.books.forEach((book) => {
							book.isInp = false
						})
						item.isInp = true
					},
					addBookCount(curBook) {
						curBook.count++
					},
					subBookCount(curBook) {
						if (curBook.count === 0) {
							return
						}
						curBook.count--
					},
					removeBook(curBook) {
						const bookIndex = this.books.findIndex((item) => item.id === curBook.id)
						this.books.splice(bookIndex, 1)
					},
					formatPrice(price) {
						return '￥' + price
					},
				},
				computed: {
					totalPrice() {
						/* let price = 0
						for (const item of this.books) {
							price += item.price * item.count
						}
						return price */
						let total = this.books.reduce((pre, item) => {
							return (pre += item.price * item.count)
						}, 0)
						return total
					},
				},
			})

			app.mount('#app')
		</script>
	</body>
</html>
